<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="./template.xhtml">

    <ui:define name="title">
        Báo cáo đối soát
    </ui:define>

    <ui:define name="content">
        <h:form>
            <p:panel>

                <h:panelGrid columns="2">
                    Thời gian* 
                    <p:calendar value="#{reconcileBean.reconcileDate}" pattern="dd/MM/yyyy" timeZone="Asia/Saigon" navigator="true"
                                required="true" requiredMessage="Bạn chưa chọn thời gian"/>
                    <h:outputText/>
                    <p:selectOneRadio value="#{reconcileBean.reportTimeType}">
                        <f:selectItem itemLabel="Theo tháng" itemValue="byMonth"/>
                        <f:selectItem itemLabel="Theo ngày" itemValue="byDay"/>
                    </p:selectOneRadio>
                    <h:outputText/>
                    <p:commandButton ajax="false" value="Xem báo cáo" action="#{reconcileBean.getReconcileReport()}"/>

                </h:panelGrid>
            </p:panel>
        </h:form>
        <br/>
        <h:form>


            <p:dataTable id="table" value="#{reconcileBean.list}" var="item" 
                         emptyMessage="Không có giao dịch trong thời gian này"
                         paginator="#{reconcileBean.list.size() >20}" rows="20" >

                <p:column headerText="Mạng" sortBy="#{item.provider}">
                    #{item.provider}
                </p:column>
                <p:column headerText="6071" sortBy="#{item.sc6071}">
                    #{item.sc6071}
                </p:column>
                <p:column headerText="6171" sortBy="#{item.sc6171}">
                    #{item.sc6171}
                    </p:column>
                    <p:column headerText="6271" sortBy="#{item.sc6271}">
                        #{item.sc6271}
                        </p:column>
                        <p:column headerText="6371" sortBy="#{item.sc6371}">
                            #{item.sc6371}
                            </p:column>
                            <p:column headerText="6471" sortBy="#{item.sc6471}">
                                #{item.sc6471}
                                </p:column>
                                <p:column headerText="6571" sortBy="#{item.sc6571}">
                                    #{item.sc6571}
                                    </p:column>
                                    <p:column headerText="6671" sortBy="#{item.sc6671}">
                                        #{item.sc6671}
                                        </p:column>
                                        <p:column headerText="6771" sortBy="#{item.sc6771}">
                                            #{item.sc6771}
                                            </p:column>
                                            </p:dataTable>
                                            </h:form>
                                            </ui:define>

                                            </ui:composition>

